import { Card, Avatar, Tabs, Input, Form, Button, Select, Col, Row, Spin } from 'antd';
import { LoadingOutlined } from '@ant-design/icons'
import { BasicSettings } from './BasicSettings';
import { SecuritySetting } from './SecuritySetting';
import { AccountBinding } from './AccountBinding';
import style from './index.module.scss'
import { useDispatch, useSelector } from 'react-redux';
import { RootState } from '@/interface/store';
import { user } from '@/interface/user';
import { useEffect, useLayoutEffect } from 'react';
import { getUserInfo } from '@/store/actions/user';
export const UserSettings = () => {

    const dispatch = useDispatch();
    useLayoutEffect(() => {
        // 获取用户信息
        dispatch(getUserInfo())
    }, [])
    const userInfo = useSelector((state: RootState) => state.user.user as user);

    const isUserInfo = () => {
        return <Card style={{ padding: 20 }}>
            <div className='user_setting'>
                <div className='user_avatar'>
                    <Avatar size={100} src="https://joeschmoe.io/api/v1/random" />
                </div>
                <div className='user_info'>
                    <div className='user_info_item'>
                        <span className='user_name'>昵称：{userInfo.username}</span>
                        <span className='user_id'>用户id：{userInfo.uid}</span>
                    </div>
                    <div className='user_info_item'>
                        <span className='user_balance'>余额：{userInfo.accountBalance}</span>
                        <span className='user_grade'>等级：{userInfo.userGrade}</span>
                    </div>
                    <div className='user_info_item'>
                        <span className='user_qq'>QQ：{userInfo.qq || '请设置QQ账号'}</span>
                        <span className='user_wechat'>微信：{userInfo.wx || '请设置微信账号'}</span>
                    </div>
                </div>
            </div>
        </Card>
    }
    const NoUserInfo = () => {
        return <Card style={{ padding: 20, textAlign: 'center' }}>
            <Spin />
        </Card>
    }
    return (
        <div className={style.root}>
            <div>{userInfo.uid ? isUserInfo() : NoUserInfo()}</div>
            <Card style={{ padding: 20, marginTop: 10 }}>
                <Tabs type="line" tabBarGutter={50} >
                    <Tabs.TabPane tab="基本设置" key="1">
                        <BasicSettings></BasicSettings>
                    </Tabs.TabPane>
                    <Tabs.TabPane tab="密码设置" key="2">
                        <SecuritySetting></SecuritySetting>
                    </Tabs.TabPane>
                    <Tabs.TabPane tab="账号绑定" key="3" disabled>
                        <AccountBinding></AccountBinding>
                    </Tabs.TabPane>
                </Tabs>
            </Card>
        </div >
    )
}
